<!--租期 -->
<template>
  <div class="leaseTerm">
    <a-input-number
      class="hintInput"
      :disabled="disabled"
      v-model="day"
      @change="changeLease"
      type="number"
      :min="0"
    />
    <span class="hintUnit">{{ $t('workSpace.day') }}</span>
    <a-input-number
      class="hintInput"
      :disabled="disabled"
      v-model="hour"
      @change="changeLease"
      type="number"
      :min="0"
    />
    <span class="hintUnit">{{ $t('workSpace.hour') }}</span>
    <a-input-number
      class="hintInput"
      :disabled="disabled"
      v-model="minute"
      @change="changeLease"
      type="number"
      :min="0"
    />
    <span class="hintUnit">{{ $t('wirelessConfig.time') }}</span>
  </div>
</template>
<script>
// import { maccApi, requestHttp } from '@utils/index';
export default {
  name: 'LeaseTerm',
  props: {
    value: {
      typeof: Object,
      default: () => {
        return {
          day: 0,
          hour: 8,
          minute: 0,
        };
      },
    },
    disabled: {
      typeof: Boolean,
    },
  },

  data() {
    const { day, hour, minute } = this.value;
    return {
      day,
      hour,
      minute,
    };
  },

  components: {},

  mounted() {
    console.log('this.disabled', this.disabled);
  },

  watch: {
    value(val) {
      const { day, hour, minute } = val;
      this.day = day;
      this.hour = hour;
      this.minute = minute;
    },
  },

  methods: {
    changeLease() {
      const { day, hour, minute } = this;
      console.log(' day, hour, minute', day, hour, minute);

      this.$emit('change', {
        day,
        hour,
        minute,
      });
    },
  },
};
</script>

<style lang="less" scoped>
.leaseTerm {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 40px;
  .hintInput {
    width: 80px;
  }
  .hintUnit {
    margin: 10px 8px 0;
  }
}
</style>
